<!-- setup 封装了data()和method() -->
<script setup lang="ts">
    import {ref} from "vue"

    let jobName= ref( "Java工程师") //ref()实现了 双向绑定，vue<----->html : 响应式
    let jobMinSalary=ref(3000)
    let jobMaxSalary=ref(5000)

    function showJob(){
        jobMinSalary.value +=1000 //添加ref()之后访问值要加.value
        console.log("jobName = " + jobName.value)
        console.log("jobMinSalary = " + jobMinSalary.value)
        console.log("jobMaxSalary = " + jobMaxSalary.value)
    }
</script>

<template>
    <div>
        <h2>ref 响应式状态</h2>
        <h3>职位信息</h3>
        职位名称：<input type="text" v-model="jobName"><br>
        最低薪资：<input type="number" v-model="jobMinSalary"><br>
        最高薪资：<input type="number" v-model="jobMaxSalary"><br>
        <button @click="showJob">增加最低薪资+1000 </button>
    </div>
</template>
